<template>
    <div class="edit-wrap" >
      <div class="edit" id="editView">
        <div class="wk-box" v-bind:class="this.pageData.skin">
          <div class="page-title">{{this.pageData.title}}</div>
          <div class="page-describe">{{this.pageData.describe}}</div>
          <div :id="item.id" :is="item.component" v-if="item" :obj="item" v-for="(item, i) in this.pageData.formItems" :key="i"></div>
        </div>
      </div>
    </div>
</template>

<script>
import address from './libs/address'
import checkbox from './libs/checkbox'
import date from './libs/date'
import time from './libs/time'
import datetime from './libs/datetime'
import email from './libs/email'
import hr from './libs/hr'
import input from './libs/input'
import inputCurrency from './libs/input-currency'
import inputNumber from './libs/input-number'
import page from './libs/page'
import radio from './libs/radio'
import select from './libs/select'
import selectMulti from './libs/select-multi'
import tableDefault from './libs/table-default'
import tableLeft from './libs/table-left'
import tableTop from './libs/table-top'
import tel from './libs/tel'
import textarea from './libs/textarea'
import upatta from './libs/upatta'
import upimg from './libs/upimg'
import word from './libs/word'
import place from './libs/place'

export default {
  data () {
    return {
        pageData: {},
    }
  },
  props:['show'],
  components: {
    'v-address': address,
    'v-checkbox': checkbox,
    'v-date': date,
    'v-time': time,
    'v-datetime': datetime,
    'v-email': email,
    'v-hr': hr,
    'v-input': input,
    'v-input-currency': inputCurrency,
    'v-input-number': inputNumber,
    'v-page': page,
    'v-radio': radio,
    'v-select': select,
    'v-select-multi':selectMulti,
    'v-table-default': tableDefault,
    'v-table-left': tableLeft,
    'v-table-top': tableTop,
    'v-tel': tel,
    'v-textarea': textarea,
    'v-upatta': upatta,
    'v-upimg': upimg,
    'v-word': word,
    'v-place':place
  },
  methods:{
    getPage () {
      var qs = require('qs')
      let params = {} 
      params.command = 'getPage'
      params.platform = 'web'
      params.key = '3618131528858796879'
      this.$axios({
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },        
        method: 'POST',
        url: '/service',
        data: ( () => {
          let obj = {}
          obj.data = JSON.stringify(params)
          return qs.stringify(obj)
        }) ()
      }).then((req) => {
        console.log(req.data)
        this.pageData = req.data.data.content
      })
    }, 
    
    closeedit:function(event){
      if(event.target.className == 'edit-wrap'){
        this.$emit('showedit',false)
      }
    }
  },
  mounted () {
    this.getPage()
  }
}
</script>
<style type="text/css">
  .edit-wrap {
    width: 100%;
    height: 500px;
    margin-top: 200px;
    background: #fff;
  }
</style>